<template>
    <el-drawer v-model="isShow" size="50%" :destroy-on-close="true" @close="closeHandle" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>
        <el-form :model="formDetail" ref="formDetailRef" :rules="rules" v-loading="loading" v-if="isshowformDetail">
            <el-row class="mb-3" :gutter="20">
                <el-col :span="12">
                    <el-form-item label="物品名称" label-width="80px" required prop="name">
                        <el-input v-model="formDetail.name" :readonly="isreadonly" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="物品数量" label-width="80px" required prop="num">
                        <el-input @input="validateNumber" v-model="formDetail.num" :readonly="isreadonly" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="处理方式" label-width="80px" required prop="treatment">
                        <el-input v-model="formDetail.treatment" type="textarea" resize="none" :rows="3"
                            :readonly="isreadonly" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="mb-3" style="text-align:right" v-if="showAddBtnAll">
                <el-col :span="24">
                    <template v-if="isSeeformDetail">
                        <el-button type="primary" v-if="ishoswAddBtn" @click="AddList" class='mb-3'>
                            <el-icon class="me-2">
                                <Plus />
                            </el-icon>
                            添加到列表
                        </el-button>
                        <el-button type="primary" v-else @click="ConfirmEdit" class='mb-3'>
                            确认修改
                        </el-button>
                    </template>
                    <template v-else>
                        <el-button @click="closeSee" class='mb-3'>
                            取消查看
                        </el-button>
                    </template>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="GoodMainDetailList" show-overflow-tooltip class="mb-4" border>
            <el-table-column prop="name" label="物品名称" />
            <el-table-column prop="num" label="物品数量" />
            <el-table-column prop="treatment" label="处理方式" />
            <el-table-column fixed="right" label="操作" width="190px" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="EditMsg(scope.row, scope.$index)"
                        v-if="isAdd && form.state == 1">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button link type="primary" size="small" @click="SeeMsg(scope.row)">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                    <el-button link type="danger" size="small" v-if="isAdd && form.state == 1"
                        @click="remove(scope.row)">
                        <el-icon class="me-1">
                            <Delete />
                        </el-icon>
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-form :model="form" ref="formRef2" :rules="rules2" v-loading="loading">
            <el-row class="mb-3" :gutter="20">
                <template v-if="isshowget">
                    <el-col :span="12">
                        <el-form-item label="储物柜编号" label-width="100px">
                            <el-input v-model="form.lockersnum" :readonly="GetMsgisreadonly" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="储物柜密码" label-width="100px">
                            <el-input v-model="form.lockerspsw" type="password" show-password
                                :readonly="GetMsgisreadonly" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="寄存备注" label-width="100px">
                            <el-input v-model="form.remark" :readonly="GetMsgisreadonly" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="接收时间" label-width="100px" required prop="getdate">
                            <el-date-picker v-model="form.getdate" type="datetime" placeholder="请选择接收时间"
                                value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" :readonly="GetMsgisreadonly" />
                        </el-form-item>
                    </el-col>
                </template>
                <template v-if="isshowbackdata">
                    <el-col :span="12">
                        <el-form-item label="归还时间" label-width="100px" required prop="backdate">
                            <el-date-picker v-model="form.backdate" type="datetime" placeholder="请选择归还时间"
                                value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" :readonly="Backdataisreadonly" />
                        </el-form-item>
                    </el-col>
                </template>

            </el-row>
        </el-form>
        <template #footer>
            <el-button type="primary" v-if="showgetGoodsBtn" @click="getGoods">寄存</el-button>
            <el-button @click="isShow = false">关闭</el-button>
        </template>
    </el-drawer>
</template>
<script setup>

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()
import { GoodsMainAdd, GoodsMainEdit, GoodsMainInfo } from "@/api/ApplyDetail/ApplyDetail";
const { nj_sex, nj_sheanren_type, nj_sheanren_status } = proxy.useDict('nj_sex', 'nj_sheanren_type', 'nj_sheanren_status')

const isShow = ref(false)
const loading = ref(false)
const isreadonly = ref(false)
const ishoswAddBtn = ref(true)
const showAddBtnAll = ref(true)
const GetMsgisreadonly = ref(false)

const isshowget = ref(true)

const isshowformDetail = ref(true)
const isshowbackdata = ref(false)
const Backdataisreadonly = ref(false)
const showgetGoodsBtn = ref(true)

const isSeeformDetail = ref(true)

const isAdd = ref(true)

const currentIndex = ref(null); // 记录当前编辑的行索引
const user_name = ref('')

const title = ref('物品寄存')
const form = ref({
    jwGoodsmainId: ''
})
const postData = ref({
    state: '1',
    jwGoodsmainId: ''
})
const formDetail = ref({})

const GoodMainDetailList = ref([])

const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const rules = {
    name: [{ required: true, message: "物品名称不能为空", trigger: " " }],
    num: [{ required: true, message: "物品数量不能为空", trigger: " " }],
    treatment: [{ required: true, message: "处理方式不能为空", trigger: " " }],
}
const rules2 = {
    getdate: [{ required: true, message: "接收时间不能为空", trigger: "blur" }],
    backdate: [{ required: true, message: "归还时间不能为空", trigger: "blur" }],
}
// 通知事件
const emit = defineEmits(['getList'])

const validateNumber = () => {
    // 只保留数字和空字符串  formDetail.num
    formDetail.value.num = formDetail.value.num.replace(/[^0-9]/g, '');
}
onMounted(() => {

})
// 获取详情
const getInfo = async (jwGoodsmainId) => {

}
const showAdd = async (jwApplydetailId, data) => {
    changeShowStatus()

}

const showEdit = async (data, isSee, username) => {
    changeShowStatus()
    formDetail.value = { name: "", num: "", treatment: "" }; // 清空表单
    if (isSee == 'See') {
        console.log('物品寄存归还')
        title.value = '物品寄存归还'

        isreadonly.value = true
        Backdataisreadonly.value = false
        isshowformDetail.value = true
        showAddBtnAll.value = false
        isshowbackdata.value = true
        isshowget.value = true
        showgetGoodsBtn.value = false
        showbackGoodsBtn.value = true
        GetMsgisreadonly.value = true
        isSeeformDetail.value = true
        isAdd.value = false
        getInfo(data.jwGoodsmainId)
    }
    if (isSee == 'Edit') {
        title.value = '物品寄存编辑'
        isreadonly.value = false
        showAddBtnAll.value = true
        ishoswAddBtn.value = true
        isSeeformDetail.value = true
        isshowformDetail.value = true
        isshowbackdata.value = false
        isshowget.value = true
        showgetGoodsBtn.value = true
        GetMsgisreadonly.value = false
        showbackGoodsBtn.value = false

        isAdd.value = true
        getInfo(data.jwGoodsmainId)
    }
    if (isSee == 'LastSee') {
        title.value = '物品寄存详情'
        isreadonly.value = true
        showAddBtnAll.value = false
        ishoswAddBtn.value = true
        isSeeformDetail.value = true
        isshowformDetail.value = true
        isshowbackdata.value = true
        isshowget.value = true
        GetMsgisreadonly.value = true
        showgetGoodsBtn.value = false
        showbackGoodsBtn.value = false

        Backdataisreadonly.value = true
        isAdd.value = true
        // getInfo(data.jwGoodsmainId)
    }
}

const getGoods = () => {
    proxy.$refs["formRef2"].validate(valid => {
        if (valid) {
            // if(form.value.jwGoodsmainId == ''){
            //   postData.value = {...postData.value,...form.value}
            //   postData.value.jwGoodsdetailList = GoodMainDetailList.value
            // }else{
            //   postData.value = form.value
            //   postData.value.jwGoodsdetailList = GoodMainDetailList.value
            // }
            // GoodsMainAdd(postData.value).then(res => {
            //     changeShowStatus()
            //     emit('getList', '来了老弟')
            // })
        }
    });
};


defineExpose({ showAdd, showEdit })

// 添加到列表
const AddList = () => {
    proxy.$refs["formDetailRef"].validate(valid => {
        if (valid) {
            GoodMainDetailList.value.push({ ...formDetail.value });
            formDetail.value = { name: "", num: "", treatment: "" }; // 清空表单
        }
    });
};
// 关闭查看详情
const closeSee = () => {
    formDetail.value = {}
    isSeeformDetail.value = true
    ishoswAddBtn.value = true
    isreadonly.value = false
};

// 编辑表格中的某一行
const EditMsg = (row, index) => {

    showAddBtnAll.value = true      //显示添加，确认修改-关闭按钮总
    isSeeformDetail.value = true    //显示上面的 录入操作
    ishoswAddBtn.value = false       //显示添加到列表按钮

    formDetail.value = { ...row }; // 深拷贝行数据到表单
    currentIndex.value = index; // 保存当前编辑的行索引
    isreadonly.value = false; // 使表单可编辑
};

// 详情-表格中的某一行
const SeeMsg = (row) => {
    if (showAddBtnAll) {
        ishoswAddBtn.value = false
        isSeeformDetail.value = false
        formDetail.value = { ...row }; // 深拷贝行数据到表单
        isreadonly.value = true; // 使表单可编辑
    } else {
        isSeeformDetail.value = true
        formDetail.value = { ...row }; // 深拷贝行数据到表单
        isreadonly.value = true; // 使表单可编辑
    }

};
// 确定按钮点击，更新表格中的数据
const ConfirmEdit = () => {
    if (currentIndex.value !== null) {
        GoodMainDetailList.value[currentIndex.value] = { ...formDetail.value }; // 更新表格中的数据
        formDetail.value = { name: "", num: "", treatment: "" }; // 清空表单
        currentIndex.value = null; // 重置索引
        isreadonly.value = false; // 确认后切回添加模式
        ishoswAddBtn.value = true
    }
};

const remove = (row) => {
    const index = GoodMainDetailList.value.indexOf(row);
    if (index !== -1) {
        // 使用 splice 删除指定索引处的元素
        GoodMainDetailList.value.splice(index, 1);
    }
}

// 关闭后的回调事件
const closeHandle = () => {
    // form.value = {}
    // emit('getList', '来了来了')
    console.log(123123)
}
</script>
<style></style>